<template>
	<div>
	  <el-button type="primary" @click="addTweetDialogVisible = true">
		推文编写
		<el-icon style="margin-left: 10px;">
		  <CirclePlusFilled />
		</el-icon>
	  </el-button>
  
	  <!-- 设计弹窗 -->
	  <el-dialog title="推文编写" v-model="addTweetDialogVisible" width="30%" top="13vh" :before-close="handleDialogClose">
  
		<el-form :model="formData" :rules="rules" ref="activityForm" label-width="150px">
		  <el-form-item label="推文标题:" prop="tname">
			<el-input v-model="formData.tname" placeholder="请输入推文标题"></el-input>
		  </el-form-item>
		  
		  <el-form-item label="活动时间" prop="atime">
			<el-date-picker
			  v-model="formData.atime"
			  type="datetime"
			  placeholder="选择活动时间"
			  clearable="clearable"
			  style="width: 100%;"
			></el-date-picker>
		  </el-form-item>
  
		  <el-form-item label="活动类型" prop="type">
			<el-select v-model="formData.type" placeholder="请选择活动类型">
			  <el-option label="创造能力" value="创造能力"></el-option>
			  <el-option label="文体能力" value="文体能力"></el-option>
			  <el-option label="社会实践能力" value="社会实践能力"></el-option>
			</el-select>
		  </el-form-item>
  
		  <el-form-item label="活动地点:" prop="area">
			<el-input v-model="formData.area" placeholder="请输入活动地点"></el-input>
		  </el-form-item>
  
		  <el-form-item label="是否需要提前报名" prop="take">
			<el-checkbox v-model="formData.take">是</el-checkbox>
		  </el-form-item>
  
		  <hr><br>
  
		  <el-form-item label="活动介绍:" prop="text">
			<el-input
			  type="textarea"
			  :rows="8"
			  v-model="formData.text"
			  @input="updateTextCount"
			  placeholder="请输入活动介绍"
			></el-input>
			<span class="char-count" :class="{ green: textCount > 0 }">{{ textCount }} </span>
		  </el-form-item>
		</el-form>
  
		<template #footer>
		  <span class="dialog-footer">
			<el-button type="primary" @click="submitForm">提交</el-button>
		  </span>
		</template>
	  </el-dialog>
	</div>
  </template>
  
  <script>
  import AxiosService from '@/plugins/Axios.js';
  import { ElMessage } from 'element-plus';
  import { CirclePlusFilled, SemiSelect } from '@element-plus/icons-vue';
  import { useStore } from 'vuex';
  export default {
	components: {
	  CirclePlusFilled,
	  SemiSelect
	},
	data() {
		const store = useStore(); // 使用 useStore 定义 store
	  return {
		addTweetDialogVisible: false,
		store: store, // 将 store 作为 data 函数的一部分返回
		formData: { 
		  tname: '',
		  atime: '',
		  area: '',
		  type: '',
		  text: '',
		  did: '', 
		  take: false, 
		},
		textCount: 0,
		rules: {
		  tname: [{
			required: true,
			message: '标题不能为空',
			trigger: 'blur'
		  }],
		  area: [{
			required: true,
			message: '活动地点不能为空',
			trigger: 'blur'
		  }],
		  atime: [{
			required: true,
			message: '活动时间不能为空',
			trigger: 'blur'
		  }],
		  type: [{
			required: true,
			message: '活动类型不能为空',
			trigger: 'blur'
		  }]
		}
	  };
	},
	methods: {
	  updateTextCount() {
		this.textCount = this.formData.text.length;
	  },
	  async submitForm() {
		try {
			await this.$refs.activityForm.validate();
			const did = this.store.getters.CurrentUser.did; // 从store中获取did
			const tweetData = {
			...this.formData,
			atime: this.formData.atime.toISOString(),
			take: this.formData.take,
			did: did, // 使用从store中获取的did值
			};
			await AxiosService.addArticle(tweetData);
			ElMessage({
			message: '推文已成功创建！',
			type: 'success'
			});
			this.addTweetDialogVisible = false;
			this.resetForm();
		} catch (error) {
			console.error(error);
			ElMessage({
			message: '创建推文失败，请检查您的输入并重试。',
			type: 'error'
			});
		}
	 },
	  resetForm() {
		this.formData = {
		  tname: '',
		  atime: '',
		  area: '',
		  type: '',
		  text: '',
		  take: false, // 重置take为false
		};
		this.textCount = 0;
		this.$refs.activityForm.resetFields();
	  },
	  handleDialogClose(done) {
		this.resetForm();
		done();
	  }
	}
  };
  </script>
  
  <style scoped>
  .char-count {
	position: absolute;
	bottom: 6px;
	right: 6px;
	font-size: 12px;
  }
  
  .green {
	color: green;
  }
  </style>